<template>
  <transition  name="slide">
    <div class="app-my-money">
      <section class="app-main">
        <table class="data-list row">
          <tr>
            <td class="item col-xs-12">
              <span class="item-title">计件总额</span>
              <div class="item-body">
                <span class="price-mark">￥</span><span class="item-count" v-text="resData.pieceRateAmt"></span>
              </div>
            </td>
          </tr>
        </table>
        <div class="record-content">
          <div class="title">计件流水
            <div class="filter-content">
              <mt-button type="primary"  @click="popupFilterShow=true">筛选</mt-button>
            </div>
          </div>
          <template v-if="extraObj>0">
            <div class="month-money">
              {{allotDateStart}}月
              <span class="price-mark">￥</span><span class="item-count" v-text="extraObj"></span>
            </div>
          </template>
          <ul class="record-list"
              v-infinite-scroll="loadMore"
              infinite-scroll-disabled="loading"
              infinite-scroll-distance="10">
            <li class="item" v-for="item in dataList">
              <div class="item-header">{{item.businessType}}</div>
              <div class="item-date">交易时间：{{item.createDate}}</div>
              <div class="item-date" v-if="item.businessSn">业务单号：{{item.businessSn}}</div>
              <div class="item-date" v-if="item.remark">计件备注：{{item.remark}}</div>
              <span class="money money-add" v-if="item.awardAmt>=0">+{{item.awardAmt}}¥</span>
              <span class="money money-reduce" v-else>{{item.awardAmt}}¥</span>
            </li>
          </ul>
        </div>
      </section>

      <div class="line-scale-pulse-out" v-show="loading">
        <div class="loader-item"></div>
        <div class="loader-item"></div>
        <div class="loader-item"></div>
        <div class="loader-item"></div>
        <div class="loader-item"></div>
      </div>
      <div class="load-finish-tips" v-if="loadTips">
        已加载完成
      </div>
      <!--弹窗-列表筛选-->
      <mt-popup v-model="popupFilterShow"
                position="right" class="filter-popup">
              <dl class="filter-list">
                <dd class="filter-item">
                  <span class="addon">选择计件月份</span>
                  <mt-field label="计件月份" placeholder="请选择计件月份" type="text" v-model="allotDateStart" readonly="readonly" @click.native="openPicker"></mt-field>

                </dd>
              </dl>
        <div class="button-content">
          <div class="button-block-6">
            <mt-button type="default" @click="popupFilterShow=false">取消</mt-button>
          </div>
          <div class="button-block-6">
            <mt-button type="primary" @click="handleSureFilter">确认</mt-button>
          </div>
        </div>
      </mt-popup>
      <!--弹窗-列表筛选-->

      <mt-datetime-picker
        class="select-month"
        ref="picker"
        v-model="pickerValue"
        type="date"
        year-format="{value} 年"
        month-format="{value} 月"
        date-format="{value} 日"
        :startDate="startDate"
        :endDate="endDate"
        @confirm="handleDateChange">
      </mt-datetime-picker>
    </div>
  </transition>
</template>

<script>
  import { Header,Cell,Toast,DatetimePicker } from 'mint-ui';
//  Vue.component(Header.name, Header);
export default {
  components:{
    Header,
    Cell,
  },
  data () {
    return {
      resData:'',
      popupFilterShow:false,
      storeUser:'',
      storeName:'',
      storeOrderDate:'',
      orderCount:{
        num:'0',
        add:'0'
      },
      moneyCount:{
        num:'0',
        add:'0'
      },
      predictCount:{
        num:'0',
        add:'0'
      },
      loading:false,
      page:1,
      total:0,
      loadTips:false,
      dataList:[],
      storeType:1,
      userRole:'',
      userId:'',
      extraObj:'',
      searchBeginDate:'',
      searchEndDate:'',
      allotDateStart:'',
      pickerValue:new Date('2019'),
      startDate:new Date('2019'),
      endDate:new Date(),
    }
  },
  created(){


    this.$axios({
      method: 'post',
      url:'gp/bu/login!userInfo.do',
    }).then((res)=>{
      if(res.data.result==true){

      console.log(res,3333)
      this.resData=res.data.object
      this.userId=res.data.object.userId
      var params = new URLSearchParams();
      params.append('form.userId',this.userId)
      this.$axios({
        method: 'post',
        url:'gp/bu/serviceDemandPiecerateRecord!getServiceDemandPiecerateRecordList.do',
        data:params
      }).then((res)=>{
        this.dataList=res.data.rows;
      this.total=res.data.total;
      this.extraObj=res.data.extraObj;
    });
    }
  });

  },
  methods:{
    loadMore() {
      if(this.total==0){
        return false;
      }
      if(this.dataList.length<this.total){
        this.loading = true;
        this.page++;
        var params = new URLSearchParams();
        params.append('page', this.page);
        if(this.searchBeginDate!=''){
          params.append('form.createDateBegin',this.searchBeginDate)
          params.append('form.createDateEnd',this.searchEndDate)
        }
        params.append('form.userId',this.userId)
        this.$axios({
          method: 'post',
          url:'gp/bu/serviceDemandPiecerateRecord!getServiceDemandPiecerateRecordList.do',
          data:params
        }).then((res)=> {
          for(var i=0;i<res.data.rows.length;i++){
          this.dataList.push(res.data.rows[i]);
        }
      });
     setTimeout(() => {
        this.loading = false;
      },1500);
      }else{
        this.loadTips=true;
      }
    },
    openPicker(type) {
      this.$refs.picker.open();
    },
    handleSureFilter(){
      if(this.searchBeginDate==''){
          Toast({
            message: '请选择计件月份',
            position: 'middle',
            duration:1500
          });
        return false
      }

      var params = new URLSearchParams();
      params.append('form.userId',this.userId)
      params.append('form.createDateBegin',this.searchBeginDate)
      params.append('form.createDateEnd',this.searchEndDate)
      this.$axios({
        method: 'post',
        url:'gp/bu/serviceDemandPiecerateRecord!getServiceDemandPiecerateRecordList.do',
        data:params
      }).then((res)=>{
        this.dataList=res.data.rows;
      this.total=res.data.total;
      this.popupFilterShow=false;
    });
      var params = new URLSearchParams();
      params.append('form.userId',this.userId)
      params.append('form.createDateBegin',this.searchBeginDate)
      params.append('form.createDateEnd',this.searchEndDate)
      this.$axios({
        method: 'post',
        url:'gp/bu/serviceDemandPiecerateRecord!getUserPrAmount.do',
        data:params
      }).then((res)=>{
      this.extraObj=res.data.extraObj;
    });


    },
    handleDateChange(){
      const d = new Date(this.pickerValue);
      const year=d.getFullYear();
      var month='';
      var date='';
      if(d.getMonth()+1<=9){
        month='0'+(d.getMonth()+1)
      }else{
        month=d.getMonth()+1
      };
      if(d.getDate()+1<=9){
        date='0'+d.getDate()
      }else{
        date=d.getDate()
      };
      this.allotDateStart=year + '-' + month;
      this.searchBeginDate=year + '-' + month + '-01';
      this.searchEndDate=year + '-' + month+ '-' +new Date(year,month,0).getDate();
    },
  }
}
</script>
<style>
  .app-my-money{
    padding:0 0 12px;
  }
  .app-my-money .app-main{
    padding:0 0 12px;
  }
  .app-my-money .module-type{
    margin:0 0 16px;
  }
  .app-my-money .module-info {
    background: #fff;
    margin: 0 0 12px;
    padding: 12px 16px;
    font-size:15px;
  }
  .app-my-money .module-info .item {
    padding: 0 0 4px;
  }
  .app-my-money .module-info .item-addon {
    color: #888;
  }
  .price-mark{
    font-size: 16px;
  }
  .app-my-money .data-list {
    background: #fff;
    width: 100%;
    margin: 0 0 12px;
    padding:0;
  border-collapse: collapse}
  .app-my-money .data-list .item {
    position: relative;
    width: 50%;
    padding:24px 6px 13px;
    font-size:28px;
    text-align: center; }
  .app-my-money .data-list .item:nth-of-type(2n) {
    border-left:1px solid #ddd;

  }
  .app-my-money .data-list .item-title {
    display: block;
    font-size:16px; }
  .app-my-money .data-list .item-count {
    display: inline-block;
    vertical-align: middle;
    font-size:25px;
    color: #333;
    font-weight: bold;
    margin-right:5px;
    line-height:55px; }
  .app-my-money .data-list .item-add {
    display: inline-block;
    vertical-align: middle; }
  .app-my-money .data-list .add-count {
    display: block;
    font-size:16px;
    color: #ef3b3c;
    font-weight: bold;
    letter-spacing: 0px; }
  .app-my-money .data-list .add-tips {
    display: block;
    font-size:16px;
    color: #aaa; }
  .app-my-money .button-content {
    padding:20px 30px; }
  .app-my-money .button-content .btn {
    background: #007EE5;
    display: block;
    width: 100%;
    outline: none;
    padding:10px 0;
    border: none;
    color:#fff;
    font-size:16px;
    font-family: "Microsoft YaHei";
    border-radius: 50px;
    text-align: center;
  }
  .app-my-money .button-content .tips {
    position: relative;
    text-align: left;
    padding-top:12px;
    padding-left:60px;
    margin: 0 0 13px;
    font-size:12px;
    color: #999;
    line-height:17px; }
  .app-my-money .button-content .addon {
    position: absolute;
    left: 0;
  }
  .app-my-money .record-content {
    background: #fff;
    padding:16px 12px 0; }
  .app-my-money .record-content .title {
    position: relative;
    padding: 0 0 15px;
    text-align: center;
    font-size:13px;
    color: #999; }
  .app-my-money .record-content .item {
    position: relative;
    padding:18px 0;
    border-top: 1px solid #eee; }
  .app-my-money .record-content .item-header {
    margin: 0 0 12px;
    font-size:16px;
    color: #333; }
  .app-my-money .record-content .item-date {
    font-size:13px;
    color: #999;
    line-height:19px; }
  .app-my-money .record-content .item-state {
    line-height:19px;
    font-size:13px;
    color: #999; }
  .app-my-money .record-content .item-red {
    color: #ef3b3c; }
  .app-my-money .record-content .money {
    position: absolute;
    top:40px;
    right:21px;
    font-size:18px; }
  .app-my-money .record-content .money-add {
    color: #ef3b3c; }
  .app-my-money .record-content .money-reduce {
    color: #666; }

  .load-finish-tips{
    padding:8px 0 10px;
    font-size: 14px;
    color:#666;
    text-align: center;
  }
  .load-finish-tips:before{
    display: inline-block;
    vertical-align: middle;
    width:40px;
    height: 1px;
    background-color: #bbb;
    content: '';
    margin-right:6px;
  }
  .load-finish-tips:after{
    display: inline-block;
    vertical-align: middle;
    width:40px;
    height: 1px;
    background-color: #bbb;
    content: '';
    margin-left:6px;
  }
  .app-my-money .filter-content{
    position: absolute;
    top:-5px;
    right: 0;
  }
  .app-my-money .filter-content .mint-button{
    height: 30px;
    font-size: 13px;
  }
  .app-my-money .filter-popup {
    height: 100%;
    width: 90%;
    overflow: auto;
    font-size: 14px; }
  .app-my-money .filter-popup .date-list {
    margin: 0;
    padding: 0 6px;
    font-size: 0; }
  .app-my-money .filter-popup .date-item {
    margin: 0;
    display: inline-block;
    width: 33.2%;
    padding: 0 6px;
    margin: 0 0 12px; }
  .app-my-money .filter-popup .date-item.active .date-title {
    background: none;
    border: 1px solid #26a2ff;
    color: #26a2ff; }
  .app-my-money .filter-popup .date-item .date-title {
    background: #f6f8fa;
    display: block;
    padding: 5px;
    border-radius: 4px;
    font-size: 14px;
    text-align: center;
    border: 1px solid #f6f8fa; }
  .app-my-money .filter-popup .date-select {
    width: 100%; }
  .app-my-money .filter-popup .addon {
    position: relative;
    display: block;
    padding: 14px 12px 8px; }
  .app-my-money .filter-popup .addon .action-seclect {
    position: absolute;
    top: 8px;
    right: 14px;
    padding: 6px 0;
    height: auto;
    font-size: 13px;
    text-align: center;
    width: 52px !important; }
  .app-my-money .filter-popup .addon:before {
    background: #c34853;
    position: relative;
    top: -2px;
    display: inline-block;
    vertical-align: middle;
    width: 4px;
    height: 16px;
    content: '';
    margin-right: 5px; }
  .app-my-money .filter-popup .filter-list {
    margin: 0; }
  .app-my-money .filter-popup .filter-item {
    margin: 0; }
  .app-my-money .filter-popup .filter-item .mint-cell:nth-child(2) .mint-cell-wrapper {
    background: none; }
  .app-my-money .filter-popup .button-content {
    display: flex;
    padding: 24px 12px; }
  .app-my-money .filter-popup .button-block-6 {
    width: 50%;
    padding: 0 10px; }
  .app-my-money .filter-popup .mint-button {
    display: block;
    width: 100%;
    padding: 8px 0;
    font-size: 15px;
    height: auto; }
  .app-my-money .select-month .picker-slot{
    width: 50%;
    min-width:50%;
    max-width:50%;
  }
  .app-my-money .select-month .picker-items{
    justify-content:left
  }
  .app-my-money .mint-datetime-picker .picker-toolbar {
    height: 44px; }
  .app-my-money .mint-datetime-picker .mint-datetime-action {
    width: 32%;
    line-height: 44px; }
  .app-my-money .mint-datetime-picker .picker-center-highlight {
    background: #f9f9f9;
    z-index: -1; }
  .app-my-money .mint-datetime-picker .picker-item {
    color: #999; }
  .app-my-money .mint-datetime-picker .picker-item.picker-selected {
    color: #26a2ff; }
  .month-money{
    padding:0 0 12px;
    font-size: 15px;
    text-align: center;
  }
  .month-money .item-count{
    font-size: 22px;
    color: #ef3b3c;
  }
  .month-money .price-mark{

    color: #ef3b3c;
  }
</style>
